<script setup lang="ts">
// ref  reactive computed

import { computed, reactive, ref } from 'vue'

// ref:作用：1：定义响应式数据 2：获取原生标签dom  3:获取组件实例
// 用法  const 变量= ref<类型>(值)
const gender = ref<0 | 1>(1)
gender.value = 1

// reactive：作用：定义复杂数据类型的响应式数据
// 用法：  const step=reactive(复杂数据)
// const userInfo = reactive<{
//   username: string
//   age: number
//   gender?: 0 | 1
// }>({
//   username: '张三',
//   age: 18
// })
// userInfo.gender = 1
const userInfo: {
  username: string
  age: number
  gender?: 0 | 1
} = reactive({
  username: '张三',
  age: 18
})
userInfo.gender = 1
console.log(userInfo)

/*
计算属性：依赖一个或者多个值产生一个新的值
特点：有缓存，响应式（依赖的值变化了它会实时改变）
用法:js
   const xxx=computed(()=>{
    return 新的值
   })
   const xxx=computed({
      get(){
        return 新的值
      },
      set(value){....}
   })
用法:ts
   const xxx=computed<新的值的类型>(()=>新的值)

数组：[1,2,3,4,5]
计算出>3的所有值的集合

*/
const arr = ref<number[]>([1, 2, 3, 4, 5, 6, 7, 8, 9])
const total = computed<number>(() => {
  //  reduce:累加计算
  // 用法: 数组.reduce((a,b)=>{a:上一轮计算合m,b:当前项的值，return 计算后的值},0)

  return arr.value.reduce((prev, item) => {
    if (item > 3) {
      return prev + item
    }

    return prev
  }, 0)
})
// js访问计算属性  计算属性.value
console.log(total)
</script>

<template>
  <div class="app-page">app</div>
  <div>{{ arr }}</div>
  <div>大于3的合:{{ total }}</div>
</template>

<style scoped></style>
